<template>
	<view class="">
		<hx-navbar :back="false" :backgroundColor="[255, 255, 255]" transparent="hidden" :fixed="true">
			<view slot="left" class="flex justify-center align-center container-top" style="margin: 0 30rpx;">
				<view class="">
					供应
				</view>
				<view class="select">
					求购
				</view>
				<view class="">
					苗圈
				</view>
			</view>
		</hx-navbar>
		<view class="" style="border: 2rpx #F5F5F5 solid;">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
				<view class="gongying-top">
					<view class="">
						<image src="../../static/imgs/gongying.png" mode="aspectFill"></image>
					</view>
					<view class="text-shuomin">
						<view class="name">
							佳宜绿化苗木场
						</view>
						<view class="number">
							<i class="fa fa-phone" aria-hidden="true"></i>15968548874
						</view>
						<view class="introduce">
							专注苗木种植，以“绿化苗木种 植”为核心。
						</view>
					</view>
				</view>
				<view class="gongying-top">
					<view class="">
						<image src="../../static/imgs/gongying.png" mode="aspectFill"></image>
					</view>
					<view class="text-shuomin">
						<view class="name">
							佳宜绿化苗木场
						</view>
						<view class="number">
							<i class="fa fa-phone" aria-hidden="true"></i>15968548874
						</view>
						<view class="introduce">
							专注苗木种植，以“绿化苗木种 植”为核心。
						</view>
					</view>
				</view>
				<view class="gongying-top">
					<view class="">
						<image src="../../static/imgs/gongying.png" mode="aspectFill"></image>
					</view>
					<view class="text-shuomin">
						<view class="name">
							佳宜绿化苗木场
						</view>
						<view class="number">
							<i class="fa fa-phone" aria-hidden="true"></i>15968548874
						</view>
						<view class="introduce">
							专注苗木种植，以“绿化苗木种 植”为核心。
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="" style="margin: 30rpx 30rpx 0 30rpx;">
			<view class="flex navigation align-center">
				<view class="marker">
					<text style="color: #454545;">广东</text>
					<i class="fa fa-map-marker" aria-hidden="true"></i>
				</view>
				<view class="sort">
					智能排序 <i class="fa fa-sort-desc" aria-hidden="true"></i>
				</view>
				<view class="sort">
					筛选 <i class="fa fa-sort-desc" aria-hidden="true"></i>
				</view>
				<view class="flex align-center seek">
					<text class="cuIcon-search"></text>
					<input type="text" value="" placeholder="搜索产品" />
				</view>
			</view>
			<view class="">
				<view class="supply flex" style="margin: 30rpx 30rpx 30rpx 0;">
					<view class="right" style="margin-left: 0;">
						<view class="flex justify-between">
							<view class="text-bold" style="font-size: 34rpx;margin-bottom: 10rpx;">
								五叶地锦杯苗
							</view>
							<view class="">
								<view class="circular circularouw"></view>
								<view class="circular circulartwo"></view>
								<view class="circular circularthree"></view>
							</view>
							<view class="addsc">
								添加到收藏
							</view>
						</view>
						<view class="text-gray">
							<view class="">
								截止时间: 2020-10-15
							</view>
							<view class="">
								用苗地区: 福建省 龙岩市
							</view>
							<view class="">
								求购规格：杆径 30~30cm
							</view>
						</view>
						<view class="text-right text-gray">
							求购数量:<text style="font-size: 30rpx;margin:0 10rpx;font-weight: bold;">3</text> 株
						</view>
						<view class="flex icon-text align-center">
							<image src="../../static/imgs/touxian1.png" mode="aspectFill"></image>
							<view class="text-gray text-sm">
								180****2334
							</view>
						</view>
						<view class="ckxq" style="bottom: 25rpx;">
							去报价
						</view>
					</view>
				</view>
				<view class="supply flex" style="margin: 30rpx 30rpx 30rpx 0;">
					<view class="right" style="margin-left: 0;">
						<view class="flex justify-between">
							<view class="text-bold" style="font-size: 34rpx;margin-bottom: 10rpx;">
								五叶地锦杯苗
							</view>
							<view class="">
								<view class="circular circularouw"></view>
								<view class="circular circulartwo"></view>
								<view class="circular circularthree"></view>
							</view>
							<view class="addsc">
								添加到收藏
							</view>
						</view>
						<view class="text-gray">
							<view class="">
								截止时间: 2020-10-15
							</view>
							<view class="">
								用苗地区: 福建省 龙岩市
							</view>
							<view class="">
								求购规格：杆径 30~30cm
							</view>
						</view>
						<view class="text-right text-gray">
							求购数量:<text style="font-size: 30rpx;margin:0 10rpx;font-weight: bold;">3</text> 株
						</view>
						<view class="flex icon-text align-center">
							<image src="../../static/imgs/touxian1.png" mode="aspectFill"></image>
							<view class="text-gray text-sm">
								180****2334
							</view>
						</view>
						<view class="ckxq" style="bottom: 25rpx;">
							去报价
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import 'static/css/font-awesome.min.css';
	export default {
		data() {
			return {
				collection: false
			};
		},
	}
</script>

<style>
	.container-top .select {
		color: #28AD85;
		font-size: 48rpx;
	}

	.container-top view {
		font-size: 30rpx;
		font-weight: bold;
		color: #454545;
		margin-right: 50rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
	}

	.gongying-top {
		display: inline-flex;
		width: 490rpx;
		height: 192rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		align-items: center;
		margin-left: 15rpx;
		margin-bottom: 10rpx;
		box-shadow: 2px 5px 10px #e5e5e5;
	}

	.gongying-top+.gongying-top {
		margin-left: 30rpx;
	}

	.gongying-top>view {
		display: inline-block;
	}

	.gongying-top image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 20rpx;
	}

	.gongying-top .text-shuomin {
		white-space: initial;
		width: 69%;
		margin-left: 10rpx;
		margin-bottom: 8rpx;
	}

	.gongying-top .name {
		font-size: 28rpx;
		color: #303030;
		font-weight: bold;
	}

	.gongying-top .number {
		font-size: 22rpx;
		color: #FE522E;
		margin: 15rpx 0;
	}

	.gongying-top .number i {
		margin-right: 8rpx;
	}

	.gongying-top .introduce {
		font-size: 20rpx;
		color: #ADADAD;
	}
	.navigation>view+view{
		margin-left: 40rpx;
	}
	.navigation .marker{
		font-size: 36rpx;
		margin-left: 5rpx;
	}
	.navigation .marker text{
		margin-right: 8rpx;
	}
	.navigation .sort{
		font-size: 30rpx;
		font-weight: bold;
	}
	.navigation .sort i{
		position: relative;
		top: -6rpx;
		left: 8rpx;
	}
	.navigation .seek{
		width: 190rpx;
		height: 64rpx;
		border-radius: 50rpx;
		padding: 10rpx 30rpx;
	}
	.navigation .seek text{
		margin-right: 15rpx;
	}
	.navigation .seek input{
		font-size: 24rpx;
	}
	
	/* 植物 */
	.supply {
		margin: 85rpx 0 20rpx 0;
		padding: 25rpx 20rpx;
		border: 2rpx #F5F5F5 solid;
		box-shadow: 5rpx 5rpx 10rpx #F1F1F1;
		border-radius: 15rpx;
		position: relative;
		margin-right: 30rpx;
	}
	
	.supply .left {
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
	}
	
	.supply .left image {
		width: 220rpx;
		border-radius: 15rpx;
	}
	
	.supply .left .text-sm {
		position: absolute;
		bottom: 8rpx;
		right: -10rpx;
		width: 110rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 50rpx;
	}
	
	.supply .right {
		margin-left: 252rpx;
		flex: 1;
	}
	
	.supply .right>view {
		margin-bottom: 10rpx;
	}
	
	.supply .right .flex.justify-between {
		position: relative;
		margin: 10rpx 0;
	}
	
	.supply .right .flex.justify-between .addsc {
		position: absolute;
		top: -20rpx;
		right: 20rpx;
		padding: 10rpx 25rpx;
		border: 1rpx #F5F5F5 solid;
		box-shadow: -5rpx 5rpx 10rpx #F1F1F1;
		border-radius: 15rpx;
		font-size: 24rpx;
	}
	
	.circular {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
	}
	
	.circular+.circular {
		margin-top: 5rpx;
	}
	
	.right .text-gray {
		color: #999999;
	}
	
	.circularouw {
		background-color: #4CD4A9;
	}
	
	.circulartwo {
		background-color: #79DFBF;
	}
	
	.circularthree {
		background-color: #BBEFDF;
	}
	
	.supply .right .text-right text {
		color: #FE522E;
	}
	
	.icon-text image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	
	.supply .right .ckxq {
		width: 130rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
		text-align: center;
		background-color: #28C695;
		box-shadow: -6rpx 6rpx 10rpx #D5F4EA;
		color: #FFFFFF;
		position: absolute;
		bottom: 10rpx;
		right: -30rpx;
		font-size: 22rpx;
	}
</style>
